<template>
  <div class="search">
    <!-- 搜索框 -->
    <div class="search_inp_box">
      <div class="search_inp">
        <!-- 搜索图标 -->
        <span class="search_icon"></span>
        <div class="input">
          <input
            type="text"
            id="search_input"
            @input="sendHttp"
            v-model="search_value"
            autocomplete="off"
            @keydown.enter="getDetail"
           :placeholder="tips"
          />
          <!-- <label for="search_input" v-show="showTips">{{  }}</label> -->
        </div>
        <span
          class="empty_icon"
          @click="search_value = ''"
          v-show="!showTips"
        ></span>
      </div>
    </div>
    <!-- 热门搜素 -->
    <Hot_search
      :hot_search="hot_search"
      v-show="showTips"
      @getData="click_hot"
    ></Hot_search>
    <!-- 历史搜索 -->
    <Search_history v-show="showTips"></Search_history>

    <!-- 搜索记录 -->
    <Search_tips
      :search_value="search_value"
      :search_tips="search_tips"
      v-show="showHot"
      @getData='click_hot'
    ></Search_tips>
    <!-- 搜索结果 -->
    <ul v-show="search_result">
      <Music_search_item @play='$emit("play",$event)' v-for="(item, index) in search_result" :key="index" :item="item" :keywords='search_value'></Music_search_item>
    </ul>
  </div>
</template>

<script>
import Hot_search from "@/components/Hot_search.vue";
import Search_history from "@/components/Search_history.vue";
import Search_tips from "@/components/Search_tips.vue";
import Music_search_item from "@/components/Music_search_item.vue";
export default {
  name: "Search",
  components: {
    Hot_search,
    Search_history,
    Search_tips,
    Music_search_item,
  },
  mounted() {
    this.$http.get("/search/hot").then((res) => {
      this.hot_search = res.data.result.hots;
    });
  },
  // components:{
  //   // Loading
  // },
  data() {
    return {
      tips: "搜索歌曲、歌手、专辑",
      showTips: true, // search_value有值为 false ， search_value没值为 true
      showHot: false, //
      search_value: "",
      hot_search: [],
      search_tips: [],
      search_result: [],
      timer: null,
    };
  },
  watch: {
    search_value() {
      if (this.search_value) {
        this.showTips = false;
        this.showHot = true;
      } else {
        this.showTips = true;
        this.showHot = false;
      }
      this.search_result = [];
    },
  },
  methods: {
    click_hot(e) {
      this.search_value = e;
      this.getDetail();
    },
    sendHttp() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        if (this.search_value == "") return;
        this.$http
          .get(`/search/suggest?keywords=${this.search_value}&type=mobile`)
          .then((res) => {
            console.log('res===>',res);
            if (res.data.code == 200) {
              this.search_tips = res.data.result.songs;
            }
          });
      }, 1000);
    },
    getDetail() {
      if (this.search_value == "") return;
      this.$http
        .get(`/search?keywords=${this.search_value}`, {
          params: {
            type: 1,
          },
        })
        .then((res) => {
          this.search_result = [];
          res.data.result.songs.forEach((item) => {
            let data = {
              id: item.id, // 歌曲id
              name: item.name, // 歌曲名字
              song: {
                artists: item.artists, // 里面存在作者信息
                privilege: {
                  // 歌曲是否 是 sq
                  playMaxbr: item.mark,
                },
              },
            };
            this.search_result.push(data);
          });
          this.showHot = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.search {
  margin-top: 40px;
  // padding-top: 40px;
  // padding-top: 4rem;
  .search_inp_box {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .search_inp {
      height: 30px;
      border-radius: 30px;
      background-color: #ebecec;
      display: flex;
      overflow: hidden;
      span {
        width: 30px;
        height: 30px;
        &.search_icon {
          background: url()
            no-repeat;
          background-size: 13px 13px;
          background-position: center;
        }
        &.empty_icon {
          background: url()
            no-repeat;
          background-size: 14px 14px;
          background-position: center;
        }
      }
      .input {
        flex: 1;
        position: relative;
        input {
          border: none;
          box-sizing: border-box;
          background-color: #ebecec;
          position: absolute;
          height: 100%;
          width: 100%;
          outline: none;
        }
        label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 14px;
          color: #c9c9c9;
        }
      }
    }
  }
}
</style>